<?xml version="1.0" ?>

<ui:composition template="template.xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h ="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core">
    <ui:define name="accessibility">
        <ul class="accessibility">
            <li><a href="#navigation" accesskey="1">#{msg.navi}</a></li>
            <li><a href="#board" accesskey="0">#{msg.board}</a></li>
            <li><a href="#score" accesskey="2">#{msg.score}</a></li>
        </ul>
    </ui:define>
    <ui:define name="navi">
        <ul>
            <li><a href="faces/userdata.xhtml">#{msg.edit_user}</a></li>
            <li><a href="#">#{msg.back_to_lounge}</a></li>
            <li>
                <h:form>
                    <h:commandLink action="#{loginManager.logout}">
                        <h:outputText value="#{msg.logout}"/>
                    </h:commandLink>
                </h:form>
            </li>
        </ul>
    </ui:define>
    <ui:define name="main">
        #{loginManager.requireLogin}
        <div id="info_area">
            <h2>#{msg.score}</h2>
            <table id="score" summary="#{msg.board_summary}">
                <tbody>
                    <tr>
                        <th class="accessibility">#{msg.label}</th>
                        <th>#{msg.you}</th>
                        <th>#{msg.opponent}</th>
                    </tr>
                    <tr>
                        <th class="label">#{msg.pairs}</th>
                        <td><h:outputText id="pairs" value="#{cardManager.foundPairs}"/></td>
                        <td>N/A</td>
                    </tr>
                    <tr>
                        <th class="label">#{msg.tries}</th>
                        <td><h:outputText id="tries" value="#{cardManager.tries}"/></td>
                        <td>N/A</td>
                    </tr>
                    <tr>
                        <th class="label">#{msg.time}</th>
                        <td><h:outputText id="time" value="#{cardManager.getPlayTimeString()}"/></td>
                        <td>N/A</td>
                    </tr>
                </tbody>
            </table>
            <h2>#{msg.infos}</h2>
            <table id="game_info" summary="#{msg.info_summary}">
                <tbody>
                    <tr class="accessibility">
                        <th>#{msg.info}</th>
                        <th>#{msg.value}</th>
                    </tr>
                    <tr>
                        <th>#{msg.remaining}</th>
                        <td><h:outputText id="remaining" value="#{cardManager.remainingPairs}"/></td>
                    </tr>
                    <tr>
                        <th xml:lang="en">#{msg.theme}</th>
                        <td>#{msg.altrock}</td>
                    </tr>
                </tbody>
            </table>
            <h2>#{msg.top_artists}</h2>
            <ul id="top_artists">
                <li><a href="http://www.last.fm/music/Muse"><img src="img/muse.jpg" alt="Muse"/> Muse</a></li>
                <li><a href="http://www.last.fm/music/Placebo"><img src="img/placebo.jpg" alt="Placebo	"/> Placebo</a></li>
                <li><a href="http://www.last.fm/music/Radiohead"><img src="img/radiohead.png" alt="Radiohead"/> Radiohead</a></li>
            </ul>
        </div>
        <hr class="accessibility" />
        <div id="board">
            <h2 class="accessibility">#{msg.board}</h2>
            <h:form>
               <h:panelGrid  id="game" styleClass="visible_card" columns="#{cardManager.cols}">
                    <c:forEach var="card" items="#{cardManager.cards2}" varStatus="status"> 
                        <h:commandButton  image="#{card.imgURL}" alt="#{card.name}" actionListener="#{cardManager.uncover}" rendered="#{card.shown and (cardManager.mismatch and (card == cardManager.firstUncovered or card == cardManager.secondUncovered))}">
                            <f:attribute  value="#{card}" name="Card" />
                            <f:ajax render="game :remaining :time :tries :pairs"/>
                        </h:commandButton>
                        <h:graphicImage alt="#{card.name}" url="#{card.imgURL}" rendered="#{card.shown and (cardManager.mismatch and (card == cardManager.firstUncovered or card == cardManager.secondUncovered))==false}"/>
                        <h:commandButton image="img/card_background.png" alt="Unbekannte Karte" actionListener="#{cardManager.uncover}" rendered="#{!card.shown}">
                            <f:attribute  value="#{card}" name="Card" />
                            <f:ajax render="game :remaining :time :tries :pairs"/>
                        </h:commandButton>
                        
                    </c:forEach>
                       
               </h:panelGrid>
            </h:form>
        </div>
    </ui:define>
</ui:composition>